<!-- @file 竖屏端聊天室输入框 -->
<template>
  <div
    v-show="inputVisible"
    ref="inputWrapRef"
    class="c-portrait-chat-input-controller"
  >
    <!-- 消息引用 -->
    <portrait-chat-msg-quote />

    <portrait-msg-input-wrap
      ref="msgInputWrapRef"
      :placeholder="portraitMessageInputPlaceholder"
      :disabled-input="portraitChatInputDisabled"
      :disabled-emotion-picker="portraitChatInputDisabled"
      :face-emotion-enabled="chatSetting.faceEmotionEnabled"
      :image-emotion-enabled="chatSetting.imageEmotionEnabled"
      @system-msg="onSendSystemMsg"
      @submit="onSubmit"
      @click-image-emotion="closeInput"
    >
      <!-- 提问图标 -->
      <portrait-ask-icon
        v-if="!chatInputDisabled"
        slot="input-prefix"
        class="c-portrait-chat-input-controller__question-icon"
      />
    </portrait-msg-input-wrap>
  </div>
</template>

<script setup lang="ts">
import PortraitChatMsgQuote from '@/components/page-watch-common/chat/chat-msg-quote/mobile-chat-msg-quote.vue';
import PortraitAskIcon from '@/components/page-watch-common/ask/portrait-ask/portrait-ask-icon.vue';
import PortraitMsgInputWrap from '@/components/page-watch-common/msg-input-wrap/portrait-msg-input-wrap/portrait-msg-input-wrap.vue';
import { appEvents, useEventBusListener } from '@/app/app-events';
import { useAppendTo } from '@/hooks/behaviors/use-append-to';
import { useSimpleVisible } from '@/hooks/behaviors/use-simple-visible';
import { computed, nextTick, ref } from 'vue';
import { useChatInputController } from '../hooks/use-chat-input-controller';
import { storeDefinitionToRefs } from '@/plugins/pinia/util';
import { useChatStore } from '@/store/use-chat-store';
import { useClickOutside } from '@/hooks/behaviors/use-click-outside';
import { PlvInputContent, PlvInputContentText } from '@/plugins/polyv-ui/types';
import { PortraitChatTabName, usePortraitLayoutStore } from '@/store/use-portrait-layout-store';
import { getWatchCore } from '@/core/watch-sdk';

const inputWrapRef = ref<HTMLDivElement>();

const { onSubmitMessage, onSendSystemMsg, msgInputWrapRef, focusMsgInput } = useChatInputController(
  {
    submitIntercept: (contentList: PlvInputContent[]) => {
      const portraitLayoutStore = usePortraitLayoutStore();

      // 竖屏提问
      if (portraitLayoutStore.portraitMessageTabCurrentName === PortraitChatTabName.Ask) {
        const data = contentList[0] as PlvInputContentText;
        const watchCore = getWatchCore();
        watchCore.ask.sendAskSpeak({
          content: data.content,
        });
        return true;
      }

      return false;
    },
  },
);

useAppendTo(inputWrapRef);

const {
  visible: inputVisible,
  close: closeInput,
  setVisible: setInputVisible,
} = useSimpleVisible(false, {
  changeCallback: _visible => {
    const portraitLayoutStore = usePortraitLayoutStore();
    portraitLayoutStore.$patch({
      portraitMessageInputVisible: _visible,
    });
  },
});

useEventBusListener(appEvents.chat.FocusToChatInput, async () => {
  setInputVisible(true);
  await nextTick();

  focusMsgInput();
});

useClickOutside(inputWrapRef, () => {
  setInputVisible(false);
});

const { chatInputDisabled, chatSetting } = storeDefinitionToRefs(useChatStore);

const { portraitMessageInputPlaceholder, portraitMessageTabCurrentName } =
  storeDefinitionToRefs(usePortraitLayoutStore);

const portraitChatInputDisabled = computed(() => {
  if (portraitMessageTabCurrentName.value === PortraitChatTabName.Ask) {
    return false;
  }

  return chatInputDisabled.value;
});

function onSubmit(params: { contentList: PlvInputContent[] }) {
  onSubmitMessage(params);
  setInputVisible(false);
}
</script>

<style lang="scss">
.c-portrait-chat-input-controller {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: $--zIndex-top -2;
  width: 100%;
}

.c-portrait-chat-input-controller__question-icon {
  margin-right: 8.5px;
}
</style>
